<!-- Request -->
<div class="request-container container-fluid panel m-t-lg">
    <div class="row">
        <div class="col-12">
            <h5 id="request-title" class="text-muted title">
                <a class="btn-toggle-panel">[<span>-</span>] <span data-i18n="requestTitle">Request</span></a>
                <div class="btn-group authentication-mode animated zoomIn" data-mode="basic">
                    <button type="button" class="btn btn-primary btn-sm btn-auth-mode btn-basic">
                        <span class="name" data-i18n="requestBasicAuthentication">Basic authentication</span>
                    </button>
                    <button type="button" class="btn btn-primary btn-sm btn-close">
                        <i class="fa fa-close"></i>
                    </button>
                </div>
                <div class="btn-group authentication-mode animated zoomIn" data-mode="oauth10">
                    <button type="button" class="btn btn-primary btn-sm dropdown-toggle btn-auth-mode btn-oauth-10" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">
                        <span class="name" data-i18n="requestOAuth10">OAuth 1.0</span>
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item btn-edit" href="#" data-i18n="requestEdit">Edit</a>
                        <a class="dropdown-item btn-preview" data-target="#modal-oauth-preview" data-toggle="modal" href="#" data-i18n="requestPreview">Preview</a>
                        <a class="dropdown-item btn-refresh" href="#" data-i18n="requestRefresh">Refresh</a>
                    </div>
                    <button type="button" class="btn btn-primary btn-sm btn-close">
                        <i class="fa fa-close"></i>
                    </button>
                </div>
                <div class="btn-group authentication-mode animated zoomIn" data-mode="oauth20">
                    <button type="button" class="btn btn-primary btn-sm dropdown-toggle btn-auth-mode btn-oauth-10" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">
                        <span class="name" data-i18n="requestOAuth20">OAuth 2.0</span>
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item btn-edit" href="#" data-i18n="requestEdit">Edit</a>
                        <a class="dropdown-item btn-preview" href="#" data-i18n="requestPreview">Preview</a>
                        <div class="dropdown-divider"></div>
                        <div class="dropdown-header" data-i18n="requestRefresh">Refresh</div>
                        <a class="dropdown-item btn-oauth2-refresh" href="#" data-i18n="requestRefreshNow">Refresh now</a>
                        <a class="dropdown-item btn-oauth2-refresh-setting" href="#" data-i18n="requestSetting">Setting</a>
                        <div class="dropdown-divider"></div>
                        <div class="dropdown-header" data-i18n="requestTokenTransmission">Token transmission</div>
                        <a class="dropdown-item dropdown-item-checked btn-oauth2-transmission" data-type="header" href="#" data-i18n="requestTokenTransmissionAsHeader">As header</a>
                        <a class="dropdown-item btn-oauth2-transmission" data-type="querystring" href="#" data-i18n="requestTokenTransmissionAsQueryString">As query string</a>
                    </div>
                    <button type="button" class="btn btn-primary btn-sm btn-close">
                        <i class="fa fa-close"></i>
                    </button>
                </div>
            </h5>
        </div>
    </div>
    <form class="request-form row m-t-none">
        <div class="col-12">
            <div class="card">
                <div class="card-block">
                    <div class="form-inline d-flex flex-row">
                        <label for="request-method" data-i18n="requestMethod">Method</label>
                        <div class="input-group ig-request-method">
                            <input type="text" class="form-control" id="request-method" placeholder="GET" autocomplete="off" value="GET">

                            <button type="button" class="input-group-addon" id="dd-request-methods" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fa fa-angle-down"></i>
                            </button>
                            <div id="request-method-dropdown" class="dropdown-menu dropdown-menu-right" aria-labelledby="dd-request-methods">
                                <a class="dropdown-item" href="#">GET</a>
                                <a class="dropdown-item" href="#">POST</a>
                                <a class="dropdown-item" href="#">PUT</a>
                                <a class="dropdown-item" href="#">DELETE</a>
                                <a class="dropdown-item" href="#">OPTIONS</a>
                                <a class="dropdown-item" href="#">HEAD</a>
                                <a class="dropdown-item" href="#">TRACE</a>
                                <a class="dropdown-item" href="#">CONNECT</a>
                                <a class="dropdown-item" href="#">PATCH</a>
                            </div>
                        </div>
                        <label for="request-url" class="d-inline-flex m-l-sm m-r-xs" data-i18n="requestUrl">URL</label>
                        <div class="input-group d-flex request-combo">
                            <button type="button" class="input-group-addon" id="dd-response-type" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fa fa-file-text-o icon-response-type"></i>
                            </button>
                            <div id="response-type-dropdown" class="dropdown-menu" aria-labelledby="dd-response-type">
                                <div class="dropdown-header" data-i18n="requestResponseTypeMenu">Response type</div>
                                <a class="dropdown-item btn-switch-response-type active" data-type="text" href="#"><i class="fa fa-file-text-o"></i> <span data-i18n="requestResponseTypeMenuText">Text</span></a>
                                <a class="dropdown-item btn-switch-response-type" data-type="blob" href="#"><i class="fa fa-file-archive-o"></i> <span data-i18n="requestResponseTypeMenuBlob">Blob (Binary file)</span></a>
                            </div>
                            <div class="input-group ig-request-url">
                                <input type="text" class="form-control" id="request-url" placeholder="http://www.example.com">
                                <button type="button" class="input-group-addon btn-toggle-favorite-url">
                                    <i class="fa fa-star-o"></i>
                                </button>
                                <button type="button" class="input-group-addon" id="dd-request-urls" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="fa fa-angle-down"></i>
                                </button>
                                <div id="request-urls-dropdown" class="dropdown-menu dropdown-menu-right" aria-labelledby="dd-request-urls">
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-send-request btn-primary" data-i18n="requestSend">SEND</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 div-request-headers m-t-sm" style="display: none;">
            <div class="card">
                <div class="card-block">
                    <h6 class="card-title"><span data-i18n="requestHeaders">Headers</span>
                        <button type="button" class="btn-remove-all-headers btn btn-outline-secondary btn-sm">
                            <i class="fa fa-trash"></i> <span data-i18n="requestRemoveAll">Remove all</span>
                        </button>
                    </h6>
                    <div class="d-flex flex-wrap list-request-headers">
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 div-request-body m-t-sm">
            <div class="card">
                <div class="card-block">
                    <h6 class="card-title">
                        <span data-i18n="requestBody">Body</span>
                        <button type="button" class="btn btn-link pull-right btn-form-data" data-target="#modal-form-data" data-toggle="modal">
                            <i class="fa fa-table"></i>
                        </button>
                    </h6>
                    <div class="d-flex">
                        <textarea id="request-body" class="form-control" placeholder="Request Body" data-i18n-target="placeholder" data-i18n="requestBodyTextarea"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<!-- Request end -->